<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <style type="text/css">
    a{margin-left: 20px; text-decoration: none;}
    a:hover{text-decoration: underline;}
	#test_win{
		display: none;
	}
  </style>
</head>
<body>
<div class="header">
    <h1 class="ejs_show">Your name:   <%- user.name %></h1>
    <p class="logout"><a href="/logout">我要注销 </a></p>
</div>
<div class="show_time">
    <ul>
        <li><p>当前温度为：</p><p id="TMP" class="TMP"><%= tmp %></p></li>
        <li><p>当前湿度为：</p><p id="RH" class="RH"><%= rh %></p></li>
    </ul>
    
</div>
<div class="chart-wrap" id="chart-wrap" style="width:800px;height:600px"></div>
<div>
	<div id="container"></div>  
	<input type="button" class="player-play" value="播放" />  
	<input type="button" class="player-stop" value="停止" />  
	<input type="button" class="player-status" value="取得状态" />  
	<input type="button" class="player-current" value="当前播放秒数" />  
	<input type="button" class="player-goto" value="转到第30秒播放" />  
	<input type="button" class="player-length" value="视频时长(秒)" />  
</div>
<script type="text/javascript" src="/javascripts/jwplayer.js"></script>
<script type="text/javascript" src="/javascripts/echarts.common.min.js"></script>
<script type="text/javascript" src="/javascripts/socket.io.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script type="text/javascript">
    const hostname = '192.168.1.105';
    const port = 3000;
    var socket = io.connect("192.168.1.105:3000");
    var mychart = echarts.init(document.getElementById("chart-wrap"));
    var num = 0;
    var option = {
        title: {
            text: '当前实时温湿度波动情况',
            subtext: '3秒更新'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['温度','湿度']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['0','1','2','3','4','5','6']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name:'温度',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'相对湿度',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [
                        {name: '最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                normal: {
                                    position: 'start',
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };
    var drawChart = function(data){
        if (num >= 6){
            var timestamp = new Date(parseInt(data.time*1000));
            var hour = timestamp.getHours();
            var min = timestamp.getMinutes();
            var sec = timestamp.getSeconds();
	console.log(parseInt(data.time*1000));
	// console.log(timestamp.getFullYear());
            option.xAxis.data[num] = '' + hour + ':' + min + ':' + sec;
            option.series[0].data[num] = data.tmp;
            option.series[1].data[num] = data.rh;
            num = -1 ;
        }
        else{
            var timestamp = new Date(parseInt(data.time*1000));
            var hour = timestamp.getHours();
            var min = timestamp.getMinutes();
            var sec = timestamp.getSeconds();
            option.xAxis.data[num] = '' + hour + ':' + min + ':' + sec;
            option.series[0].data[num] = data.tmp;
            option.series[1].data[num] = data.rh;
        }
        mychart.setOption(option);
    };
    
</script>
<script type="text/javascript">  
    var thePlayer;  //保存当前播放器以便操作  
    $(function() {
        mychart.setOption(option);

	    socket.on('dy_data',function(data){
        	num++;
        	console.log("get data : \n " + data);
        	drawChart(data);
	    });

        thePlayer = jwplayer('container').setup({
                flashplayer: 'player.swf',
            file: 'http://192.168.1.105:8000/test.flv',  
            width: 500,  
            height: 350,  
            dock: false  
        });  
          
        //播放 暂停  
        $('.player-play').click(function() {  
            if (thePlayer.getState() != 'PLAYING') {  
                thePlayer.play(true);  
                this.value = '暂停';  
            } else {  
                thePlayer.play(false);  
                this.value = '播放';  
            }  
        });  
          
        //停止  
        $('.player-stop').click(function() { thePlayer.stop(); });  
          
        //获取状态  
        $('.player-status').click(function() {  
            var state = thePlayer.getState();  
            var msg;  
            switch (state) {  
                case 'BUFFERING':  
                    msg = '加载中';  
                    break;  
                case 'PLAYING':  
                    msg = '正在播放';  
                    break;  
                case 'PAUSED':  
                    msg = '暂停';  
                    break;  
                case 'IDLE':  
                    msg = '停止';  
                    break;  
            }  
            alert(msg);  
        });  
          
        //获取播放进度  
        $('.player-current').click(function() { alert(thePlayer.getPosition()); });  
  
        //跳转到指定位置播放  
        $('.player-goto').click(function() {  
            if (thePlayer.getState() != 'PLAYING') {    //若当前未播放，先启动播放器  
                thePlayer.play();  
            }  
            thePlayer.seek(30); //从指定位置开始播放(单位：秒)  
        });  
          
        //获取视频长度  
        $('.player-length').click(function() { alert(thePlayer.getDuration()); });  
    });  
</script>  

</body>
</html>